Summary

This PR restructures the editor's UI layout by separating tabs into a dedicated tab bar below the title bar, and replacing the inline dropdown menu with a floating action button (FAB) menu system on the left side of the title bar.

Key Changes

• Tab bar separation: Moved tab rendering and interaction from the title bar to a new dedicated render_tabbar() function. Tabs now occupy their own horizontal bar with consistent spacing and layout.

• FAB menu system: Replaced the single dropdown trigger button with a row of four FAB buttons (File, Edit, View, Settings) positioned on the left side of the title bar. Each FAB displays a Unicode icon and can be clicked to toggle its associated menu.

• Menu dropdown simplification: Removed category headers and separators between menu groups. The dropdown now displays only items from the selected menu, reducing visual clutter and simplifying the menu structure.

• Layout constants updated:

  • TITLEBAR_H: 36 → 40 pixels
  • TABBAR_H: 6 → 38 pixels (now a functional tab bar instead of spacing)
  • MENUBAR_H: remains 0 (unused)

• State tracking refactored:

  • Replaced dropdown_hover and dropdown_btn_x with fab_hover (tracks which FAB is hovered)
  • Updated menu_hover_item to use per-menu indexing instead of flat indexing across all menus
  • Added menu_bar_widths[] array for FAB width tracking

• Click and hover handling: Updated mouse event handlers to work with the new FAB positions and simplified menu structure. FAB hover now supports menu switching when a menu is already open.

Implementation Details

• FAB buttons are rendered as rounded squares with Unicode icons (hamburger menu, pencil, search, gear)
• FAB positioning uses consistent spacing: fab_start_x + i * (fab_size + fab_pad)
• Menu dropdown position is calculated relative to the clicked FAB's x-coordinate
• Tab bar click detection now checks the dedicated tab bar region instead of the title bar

https://claude.ai/code/session_012jkEhwey5QbTAnq7dCnaU7